<template>
  <div>
    <div class="w">
      <div class="w-left">
        <div class="left-top">
          <h2>云音乐特色榜</h2>
          <ul style="margin-bottom: 20px">
            <li
              v-for="(item, index) in list.slice(0, 4)"
              :key="index"
              @click="tiaozhuan(item.id,item.updateFrequency)"
            >
              <div class="item-li">
                <div class="left">
                  <img :src="item.coverImgUrl" alt="" />
                </div>
                <div>
                  <p style="margin-bottom: 8px">
                    <a style="color: #000" href="">{{ item.name }}</a>
                  </p>
                  <p style="color: #999">{{ item.updateFrequency }}</p>
                </div>
              </div>
            </li>
          </ul>
          <h2>全球媒体榜</h2>
          <ul>
            <li
              v-for="(item, index) in list.slice(4)"
              :key="index"
              @click="tiaozhuan(item.id,item.updateFrequency)"
            >
              <div class="item-li">
                <div class="left">
                  <img :src="item.coverImgUrl" alt="" />
                </div>
                <div>
                  <p style="margin-bottom: 8px">
                    <a style="color: #000" href="">{{ item.name }}</a>
                  </p>
                  <p style="color: #999">{{ item.updateFrequency }}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="w-right">
        <paihangbang :gequ="gequ"></paihangbang>
      </div>
    </div>
  </div>
</template>

<script>
import { getpaihang, getTiaoZhuan } from "../api/paihang";
import paihangbang from "../components/paihangbang.vue";
export default {
  components: { paihangbang },
  data() {
    return {
      list: [],
      gequ: [],
    };
  },
  async created() {
    let res = await getpaihang();
    console.log(res);
    this.list = res.list;
    let res1 = await getTiaoZhuan();
    this.gequ = res1.playlist;
    console.log(res1.playlist);
  },
  methods: {
    async tiaozhuan(id,string) {
      console.log(id);
      let res = await getTiaoZhuan(id);
      console.log(res);
      this.gequ = res.playlist;
      this.$store.commit("gengxin",string)
    },
  },
};
</script>

<style lang="less" scoped>
* {
  font-size: 12px;
}
.w {
  width: 982px;
  margin: auto;
  display: flex;
  .w-left {
    border: 1px solid #d3d3d3;
    width: 240px;
    .left-top {
      margin-top: 40px;
      h2 {
        padding: 0 10px 12px 15px;
        font-size: 14px;
        color: #000;
        font-family: simsun, \5b8b\4f53;
      }
      ul > li {
        padding: 10px 0 10px 20px;
        cursor: pointer;
        .item-li {
          display: flex;
        }
      }
    }
  }
}
.left {
  margin-right: 10px;
}
.left img {
  width: 40px;
  height: 40px;
}
</style>